<template>
  <div>
    <el-dialog
      title="广告系列销售情况"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >
      <div>
        <el-table
          v-loading="loading"
          border
          stripe
          height="700"
          :data="chartData"
          show-summary
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="ad"
            sortable
            label="广告系列"
          />
          <el-table-column
            prop="cost"
            sortable
            label="广告成本"
          />
          <el-table-column
            prop="amount"
            sortable
            label="销售金额"
          />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as echarts from 'echarts'

// require('echarts/theme/macarons') // echarts theme
// import { debounce } from '@/utils'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    PieChartVisible: {
      type: Boolean,
      default: false
    },
    chartData: {
      type: Object
    }
  },
  data() {
    return {
      dialogVisible: false,
      chart: null
    }
  },
  // mounted() {
  //   // this.initChart()
  //   this.__resizeHanlder = debounce(() => {
  //     if (this.chart) {
  //       this.chart.resize()
  //     }
  //   }, 100)
  //   window.addEventListener('resize', this.__resizeHanlder)
  // },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return
  //   }
  //   window.removeEventListener('resize', this.__resizeHanlder)
  //   this.chart.dispose()
  //   this.chart = null
  // },
  watch: {
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     if (this.chart) {
    //       this.setOptions(val)
    //     } else {
    //       this.chart = echarts.init(this.$el, 'macarons')
    //       this.setOptions(val)
    //     }
    //   }
    // },
    PieChartVisible(v) {
      this.dialogVisible = v
      // this.initChart()
    }
  },
  methods: {
    // setOptions({ legend, series } = {}) {
    //   this.chart.setOption({
    //     tooltip: {
    //       trigger: 'item',
    //       formatter: '{a} <br/>{b} : {c} ({d}%)'
    //     },
    //     legend: {
    //       left: 'center',
    //       bottom: '10',
    //       data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
    //     },
    //     calculable: true,
    //     series: [
    //       {
    //         name: '销售额',
    //         type: 'pie',
    //         roseType: 'radius',
    //         radius: [15, 95],
    //         center: ['50%', '38%'],
    //         data: [
    //           { value: 320, name: 'Industries' },
    //           { value: 240, name: 'Technology' },
    //           { value: 149, name: 'Forex' },
    //           { value: 100, name: 'Gold' },
    //           { value: 59, name: 'Forecasts' }
    //         ],
    //         animationEasing: 'cubicInOut',
    //         animationDuration: 2600
    //       }
    //     ]
    //   })
    // },
    close() {
      this.$emit('closeMyDialog', false)
    }
  }
}
</script>
<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
